import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import {
  Card,
  Drawer,
  Space,
  Button,
  Pagination,
  Image,
  message,
  Popconfirm,
  Empty,
  Col,
  Row,
} from 'antd';
import { delFileItem } from '@/j_api';
import setleIndex from '@/pages/index.less';
import style from '../index.less';

const gridStyle: React.CSSProperties = {
  width: '100%',
  textAlign: 'center',
  padding: '0',
};

function FileList(props: any) {
  const { filelist, total, dispatch, lodingboolean } = props;

  const [open, setOpen] = useState(false);
  const [chouItem, setChouItem] = useState({
    id: '',
    url: '',
    originalname: '',
    filename: '',
    type: '',
    size: 0,
  });
  const [pageInfo] = useState({ page: 1, pageSize: 12 });

  useEffect(() => {
    dispatch({ type: 'file/INIT', pageInfo });
  }, []);

  const showDrawer = (item: any) => {
    setOpen(true);
    setChouItem(item);
  };

  const onClose = () => {
    setOpen(false);
  };

  // 复制内容
  const handleCopy = (text: any) => {
    navigator.clipboard.writeText(text).then(() => {
      message.success('内容已复制到剪切板');
    });
  };

  const onChange = (page: number, pageSize: number) => {
    dispatch({
      type: 'file/INIT',
      pageInfo: {
        page,
        pageSize,
      },
    });
  };
  // 删除文件
  const confirm = (e: any) => {
    const id = chouItem.id;
    delFileItem(id).then((res: any) => {
      if (res.statusCode === 200) {
        message.success('删除成功');
        setOpen(false)
        dispatch({ type: 'file/INIT', pageInfo });
      }
    });
  };

  const cancel = (e: any) => {
    console.log(e);
  };

  return (
    <div className={setleIndex.mt20}>
      <Card loading={lodingboolean}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            flexWrap: 'wrap',
          }}
        >
          <Row gutter={[16, 24]}>
            {filelist && filelist.length > 0 ? (
              filelist.map((item: any) => {
                return (
                  <Col key={item.id} span={6}>
                    <Card.Grid
                      className={style.cardgrid}
                      style={gridStyle}
                      onClick={() => showDrawer(item)}
                    >
                      <img width={'100%'} height={170} src={item.url} />
                      <p>
                        <b>{item.originalname}</b>
                      </p>
                      <p>上传于{new Date(item.createAt).toLocaleString()}</p>
                    </Card.Grid>
                  </Col>
                );
              })
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            )}
          </Row>
        </div>
        <div
          style={{
            marginTop: '20px',
            float: 'right',
          }}
        >
          <Pagination
            // 默认的每条页数
            defaultPageSize={12}
            // 总数量
            total={total}
            // 用于显示数据总量和当前数据顺序
            showTotal={(total) => {
              return <>共{total}条</>;
            }}
            // 指定每页可以显示多少条
            pageSizeOptions={[8, 12, 24, 36]}
            onChange={onChange}
            // 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
            showSizeChanger={true}
          />
        </div>
      </Card>
      <Drawer
        title="文件信息"
        placement="right"
        onClose={onClose}
        open={open}
        closable={false}
        width={600}
        footer={
          <div
            style={{
              float: 'right',
            }}
          >
            <Space>
              <Button onClick={onClose}>关闭</Button>
              <Popconfirm
                title="确认删除这个文件？"
                onConfirm={confirm}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
              >
                <Button danger>删除</Button>
              </Popconfirm>
            </Space>
          </div>
        }
        extra={
          <span className={style.Rightspan} onClick={onClose}>
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="close"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
            >
              <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
            </svg>
          </span>
        }
      >
        <Image width={'100%'} height={320} src={chouItem.url} />
        <div style={{ marginTop: '10px', fontSize: '12px' }}>
          <p>文件名称：{chouItem.originalname}</p>
          <p>存储路径：{chouItem.filename}</p>
          <p className={style.p_size}>
            <span>文件类型：{chouItem.type}</span>
            <span>文件大小：{(chouItem.size / 1000).toFixed(2)} KB</span>
          </p>
          <div
            style={{
              display: 'flex',
              lineHeight: '20px',
            }}
          >
            访问链接：<div className={style.p_url}>{chouItem.url}</div>
          </div>
          <p
            style={{
              textIndent: '80px',
            }}
          >
            <a onClick={() => handleCopy(chouItem.url)}>复制</a>
          </p>
        </div>
      </Drawer>
    </div>
  );
}
// connect接收两个参数
// 1. 函数 mapStateToProps
const mapStateToProps = (state: any) => {
  const { file } = state;
  return file;
};
export default connect(mapStateToProps)(FileList);
